<script setup>
import { ref } from 'vue';
import { $t } from '@/locales';
import { useTable } from '@/hooks/common/table';
import { fetchShopSeach } from '@/service/api';
import ActivitySearch from './modules/activity-search.vue';

const { columns, data, loading, getData, getDataByPage, mobilePagination, searchParams, resetSearchParams } = useTable({
  apiFn: fetchShopSeach,
  apiParams: {
    PageIndex: 1,
    PageSize: 5,
    taskNumber: undefined,
    participatingStores: []
  },
  columns: () => [
    { type: 'selection', width: 48 },
    { prop: 'ShopId', label: $t('page.operations.promotionNumber') },
    { prop: 'Name', label: $t('page.operations.promotionName') },
    { prop: 'promotionTime', label: $t('page.operations.promotionTime') },
    { prop: 'promotionDetail', label: $t('page.operations.promotionDetail') }
  ]
});

const model = ref(createDefaultModel());
function createDefaultModel() {
  return {
    isAll: false,
    discountRate: ''
  };
}

const fileList = ref([]);
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <ActivitySearch v-model:model="searchParams" />
    <ElCard class="card-wrapper">
      <ElTable v-loading="loading" height="100%" border class="sm:h-full" :data="data" row-key="ShopId">
        <ElTableColumn v-for="col in columns" :key="col.prop" v-bind="col" />
      </ElTable>
    </ElCard>
    <ElCard class="card-wrapper">
      <ElForm :model="model" label-placement="left" label-width="145px" class="w-600px">
        <ElFormItem :label="$t('page.operations.promotionProducts')">
          <div class="flex-col">
            <div class="flex">
              <span class="mr-16px">全店商品</span>
              <ElSwitch v-model="model.isAll" />
            </div>
            <ElUpload
              v-model:file-list="fileList"
              class="uploader"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              list-type="picture-card"
            >
              <ElIcon :size="40">
                <SvgIcon icon="material-symbols:add" />
              </ElIcon>
            </ElUpload>
          </div>
        </ElFormItem>
        <ElFormItem :label="$t('page.operations.discountRate')" prop="discountRate">
          <ElInput v-model="model.discountRate" />
        </ElFormItem>
        <ElFormItem>
          <ElSpace :size="16">
            <ElButton type="primary">{{ $t('page.operations.checkLoss') }}</ElButton>
            <ElButton type="primary">{{ $t('page.operations.startRegistration') }}</ElButton>
          </ElSpace>
        </ElFormItem>
      </ElForm>
    </ElCard>
  </div>
</template>

<style lang="scss" scoped>
.uploader {
  :deep(.el-upload--picture-card) {
    --el-upload-picture-card-size: 80px;
  }
}
</style>
